<template>
	<view class="collectionCentre">
		<view class="search">
			<uni-search-bar v-model="searchValue" class="uni-mt-10" radius="20" placeholder="关键字搜索" clearButton="auto" cancelButton="none" @confirm="search" />
		</view>
		<view class="content">
			<u-tabs :current="current" :list="list1" @change="changeTabs" :lineWidth="0" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle"></u-tabs>
			<view class="contentBox" v-for="item in dataList" :key="item.id" @click="goDetail(item)">
				<view class="contentBox-top">
					<view class="imgBox"><u--image :src="item.imgUrl" width="112rpx" height="112rpx"></u--image></view>
					<view class="textBox ellipsis">
						<text>{{ item.title }}</text>
					</view>
				</view>
				<view class="contentBox-b">
					<text>{{ item.sourceNickName }}</text>
					<text>{{ item.createTime }}</text>
				</view>
			</view>
		</view>
		<!-- 接口请求失败 -->
		<view class="bottom">
			<u-loadmore :status="status" v-if="dataList && dataList.length > 0" />
			<empty v-if="dataList && dataList.length == 0" bgColor="transparent" :zIndex="10"><view class="tips" slot="content">暂无内容</view></empty>
		</view>
	</view>
</template>

<script>
import pageMixin from '@/mixins/pageMixin';
import { favoriteList } from '@/api/user/user.js';
export default {
	mixins: [pageMixin],
	components: {},
	data() {
		return {
			status: 'loadmore', //加载 loadmore/ loading / nomore
			current: 0,
			imgPathOne: 'https://res.jiyaqi.com/pet/miniapp/medical/icon4.png',
			inactiveStyle: {
				color: '#666666',
				fontSize: '24rpx',
				padding: '8rpx 35rpx',
				backgroundColor: '#fff',
				borderRadius: '10rpx'
			},
			activeStyle: {
				color: '#FF5900',
				fontSize: '24rpx',
				padding: '8rpx 35rpx',
				backgroundColor: 'rgba(1, 188, 141, 0.1)',
				borderRadius: '10rpx',
				border: '2rpx solid #FF5900'
			},
			list1: [
				{
					name: '全部'
				},
				{
					name: '服务',
					targetType: 1
				},
				{
					name: '常识',
					targetType: 2
				},
				// {
				// 	name: '圈态'
				// },
				{
					name: '药品',
					targetType: 4
				}
			],
			searchValue: '',
			dataList: null,
			pageNum: 1, //当前页码
			showErr: false
		};
	},
	computed: {},
	onReachBottom() {
		this.favoriteList();
	},
	onLoad() {
		this.favoriteList();
	},
	methods: {
		search() {
			this.pageNum = 1;
			this.current = 0;
			this.favoriteList();
		},
		changeTabs(item) {
			this.current = item.index;
			this.pageNum = 1;
			this.favoriteList(item.targetType);
		},

		favoriteList(targetType) {
			// if (this.status == 'nomore') {
			// 	return;
			// }
			this.status = 'loading';
			let params = {
				searchValue: this.searchValue,
				pageEnable: 1, //是否需要分页,0:不分页,1:分页
				pageNum: this.pageNum,
				pageSize: 10
			};
			if (targetType != 0) {
				params.targetType = targetType; //收藏对象类型,1-商品/服务,2常识，3圈子动态
			}
			favoriteList(params)
				.then(res => {
					if (this.pageNum == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.status = 'loadmore';
					if (res.list && res.list <= 0) {
						this.status = 'nomore';
					} else {
						this.pageNum++; //追加页码
					}
					this.dataList = this.dataList.concat(res.list); //追加新数据
					this.showErr = false;
					if (this.dataList.length >= res.total) this.status = 'nomore';
					console.log(1111, this.dataList);
				})
				.catch(err => {
					//联网失败, 结束加载
					console.log(err, '获取数据失败err');
					this.showErr = true;
					this.dataList = [];
				});
		},
		goDetail(item) {
			if (item.targetType == 1) {
				// 去 商品/服务 页面详情
				this.toPage(`server/detail?id=${item.targetId}&name=${item.userName}`);
			}
			if (item.targetType == 2) {
				// 去 常识 页面详情
				this.toPage(`petCommonSense/petCommonSenseDetail?id=${item.targetId}`);
			}
			if (item.targetType == 3) {
				// 去 圈子动态 页面详情
				this.toPage(`circle/circleDetail?id=${item.targetId}`, false);
			}
			if (item.targetType == 4) {
				// 去 药品
				this.toPage(`inquiryModule/drugDetail?detailId=${item.targetId}`, false);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
}
.collectionCentre {
}
.content {
	padding: 20rpx;
}
.search {
	background-color: #fff;
	border: 1px;
}
::v-deep .u-tabs__wrapper__nav__item {
	padding: 0 5px;
}
.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all; /*允许在单词内换行,防止有字母时候出问题*/
	display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
	-webkit-line-clamp: 2; /*多行在这里修改数字即可*/
	-webkit-box-orient: vertical; /*从上到下垂直排列子元素*/
}
.contentBox {
	margin-bottom: 15rpx;
	border-radius: 10rpx;
	background-color: #fff;
	padding: 20rpx;
	&-top {
		display: flex;
		justify-content: left;
		align-items: center;
		.imgBox {
			width: 112rpx;
			height: 112rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}
		.textBox {
			flex: 1;
			margin-left: 20rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1a1a1a;
			line-height: 48rpx;
		}
	}
	.contentBox-b {
		padding-top: 15rpx;
		text {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #b3b3b3;
			line-height: 24rpx;
			margin-right: 15rpx;
		}
	}
}
.bottom {
	position: relative;
}
// ::v-deep .empty-content {
// 	background: transparent !important;
// 	height: 100%;
// 	position: absolute !important;
// }
</style>
